<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内联样式</title>
  <script src="./vue-2.4.0.js"></script>
  <style>
    .box {
      width: 400px;
      height: 400px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div id="app">
  <div :style="style">color</div>
  <!-- 1、对象方式-->
  <div :style="style1">color1</div>
  <button @click="changeColor">单击切换颜色</button>
  <!-- 2、数组内置对象-->
  <div :style="style2">数组内置对象</div>
  <!-- 3、函数返回值-->
  <div :style="getStyle(2)">color1color1</div>
  <div class="box" :style="`background-image: url(${imgSrc});`">函数返回值</div>
</div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      style: 'color: red',
      style1: {
        color: 'red',
        <!-- 1、对象方式-->
        fontSize: '30px'
      },
      style2: [{color: 'red', fontSize: '20px'}],
      imgSrc: 'https://oos-hazz.ctyunapi.cn/teaching-manage/2024/2/1760103020449026050.jpg',
    },
    methods: {
      changeColor () {
        if (this.style1.color != 'red') {
          this.style1.color = 'red'
        } else {
          this.style1.color = 'green'
        }
      },
      getStyle(n) {
        if (n == 1 ) {
          return {color: 'red'}
        } else {
          return {color: 'green'}
        }
      }
    }
  })
</script>
</html>